<template>
  <SwModal :isShow.sync="isShowModifyAdBox" :isShowBg="true" :okText="''" :isCloseOnClickBg="true">
    <div class="modifyAdBox">
      <a class="close" @click="closeModifyAdBox"><img src="./../images/close2.png"></a>
      <dl class="title">
        <dt>{{lang['modification of trading order']}}</dt>
      </dl>
      <dl class="title" v-show="currentFeeConfig.EnsureAmount > 0">
        <dd v-show="!isModifyBuyOrSell">
          <a>
            <em>{{lang['check account balance']}}</em>
          </a>
          <span >
            {{lang['payment margin']}}:
            {{getCustomerInfoList.Bond | ceilDecimal(getCustomerInfoList.Precision) | currency('USD', '', getCustomerInfoList.Precision || 0) | fillDecimal(getCustomerInfoList.Precision || 0)}}
            {{getCustomerInfoList.AssetCode || ''}}
          </span>
        </dd>
      </dl>

      <ul class="list">
        <li style="padding:20px 0 5px;">
          <div class="form-group">
          <p class="autoConfiguration" @click="autoConfiguration" :class="[isModifyBuyOrSell ? {red: isSlidingScales} : {green: isSlidingScales}]">
            {{lang['automatic setting with exponential price']}}
          </p>
          </div>
        </li>

        <li v-show="isSlidingScales">
          <label>{{lang['sliding scales']}}</label>
          <div class="form-group">
            <input type="text" name="" value="" maxlength="6" class="inputCurrentIndex" v-model="slidingScalesValue" ref="slidingScalesValue" @keyup="calculateScalePrice">
            <font class="cny percentage">%</font>
            <span class="currentIndex">
              {{lang['current index']}}:
              {{currentNumber | currency('USD', '', pair.cyPrec) | fillDecimal(pair.cyPrec)}} {{pair.currencyCode}}
            </span>
          </div>
        </li>

        <li>
          <label>{{lang['price']}}</label>
          <div class="form-group">
            <em v-show="isSlidingScales">
              {{floatPrice | currency('USD', '', pair.cyPrec) | fillDecimal(pair.cyPrec)}}
            </em>
            <input type="text" name="" value="" maxlength="9" v-model="advertisePrice" ref="advertisePrice" @keyup="calculateScalePrice" v-show="!isSlidingScales">
            <font class="cny">{{pair.currencyCode}}</font>
          </div>
        </li>

        <li>
          <label>{{lang['quantity']}}</label>
          <div class="form-group">
            <input type="text" name="" value="" maxlength="9" v-model="advertiseQuantity" ref="advertiseQuantity" @keyup="calculateScalePrice">
            <font class="cny">{{pair.coinCode}}</font>
          </div>
        </li>

        <li>
          <label>{{lang['amount of money']}}</label>
          <div class="form-group">
            <em>{{advertiseAmount | currency('USD', '', 2) | fillDecimal(2)}}</em>
            <font class="cny">{{pair.currencyCode}}</font>
          </div>
        </li>

        <li class="noMarginBuyer"  v-show="isModifyBuyOrSell && currentFeeConfig.DepositAmount > 0">
          <label><span>{{lang['whether to accept no margin buyer']}}</span></label>
          <div class="form-group"  style="width:260px">
            <a @click="isBailn = !isBailn" :class="{active : !isBailn}">{{lang['deny']}}</a>
            <a @click="isBailn = !isBailn" :class="{active : isBailn}" :data-isBailn="isBailn">{{lang['yes']}}</a>
          </div>
        </li>

      </ul>
      <button type="button" class="subtimBox blue" :class="{active: !clickIsButton}" @click="buyAdvertiseBtn" v-show="!isModifyBuyOrSell">
        {{lang['modification of trading order']}}
      </button>
      <button type="button" class="subtimBox blue" :class="{active: !clickIsButton}" @click="sellAdvertiseBtn" v-show="isModifyBuyOrSell">
        {{lang['modification of trading order']}}
      </button>
    </div>
  </SwModal>
</template>

<script>
import SwModal from '@/components/SwModal'
import ModalApi from '@/components/SwModal/api.js'
import CheckCurrencyOnInput from '@/utils/CheckCurrencyOnInput.js'
import commonFilter from '@/filters/common.js'
import EventBus from '@/service/EventBus.js'
import Decimal from '@/libs/decimal.min.js'

export default {
  props: {
    lang: {},
    propIsShowModifyAd: {}, // 弹窗控制
    isModifyBuyOrSell: {},   // falle 发布买广告 true 发布卖广告
    currentCoinAsset: {}, // 获取币的可用数量
    currentFeeConfig: {},
    currentModifyOrder: {}, // 当前广告单信息
    pair: {},
    pairInfo: {},
    getCustomerInfoList: {}
  },
  data () {
    return {
      isShowModifyAdBox: false, // 控制发布广告弹窗
      isSlidingScales: false, // 是否浮动比例 以指数价格自动设定
      isBailn: false, // 是否无保证金
      advertisePrice: '',  // 发布交易 价格
      floatPrice: '', // 显示计算价格
      slidingScalesValue: 100, // 浮动比例
      advertiseQuantity: '', // 发布交易 数量
      advertiseAmount: '', // 发布交易 总金额
      currentNumber: '', // 指数
      clickIsButton: true
    }
  },
  watch: {
    // 关闭
    isShowModifyAdBox (nv) {
      this.$emit('update:propIsShowModifyAd', nv)
    },
    // 打开
    propIsShowModifyAd (nv) {
      this.isShowModifyAdBox = nv
      this.isBailn = this.currentFeeConfig.DepositAmount <= 0   //  判断是保证金为0 不显示卖出 是否接受保证金
      this.setModifyOrder()
    },
    pairInfo () {
      this.calculateScalePrice()
    }
  },
  components: {
    SwModal
  },
  methods: {
    // 发布 买 广告
    empty () {
      this.isSlidingScales = false // 清空以指数价格自动设定
      this.advertisePrice = '' // 清空价格
      this.slidingScalesValue = 100 // 清空浮动比例
      this.advertiseQuantity = '' // 清空数量
      this.advertiseAmount = '' // 清空金额
    },
    inputImport () {
      if (!this.isSlidingScales && !parseFloat(this.advertisePrice)) { // 没有自动设定价格的时候 判断是否输入价格
        ModalApi.message(this.lang['please enter the value declared']) // '请输入申报价格'
        return false
      }
      if (this.isSlidingScales && !this.slidingScalesValue) {
        ModalApi.message(this.lang['please enter the floating ratio']) // '请输入浮动比例'
        return false
      }
      if (!this.advertiseQuantity) {
        ModalApi.message(this.lang['please enter quantity'])  // '请输入数量'
        return false
      }
      return true
    },
    // 设置浮动比例切换
    autoConfiguration () {
      this.isSlidingScales = !this.isSlidingScales
      this.slidingScalesValue = 100 // 清空浮动比例
      this.calculateScalePrice()
    },
    setModifyOrder () {
      this.advertiseQuantity = this.currentModifyOrder.UseQuantity  // 当前数量
      this.currentNumber = this.pairInfo.CurrentPrice // 指数 显示最新价
      this.isBailn = this.currentModifyOrder.AcceptedWarranty // 是否接受保证金

      if (this.currentModifyOrder.FluctuationRate > 0) {
        this.isSlidingScales = true // 浮动比例大于0就接受
        this.slidingScalesValue = commonFilter.fillDecimal(this.currentModifyOrder.FluctuationRate * 100, 2)

        this.floatPrice = Decimal.mul(this.pairInfo.CurrentPrice, this.currentModifyOrder.FluctuationRate).toFixed(10)
        this.floatPrice = commonFilter.fillDecimal(this.floatPrice, this.pair.cyPrec) // 计算浮动金额

        this.advertiseAmount = commonFilter.fillDecimal(Decimal.mul(this.floatPrice, this.advertiseQuantity).toFixed(10), 2) // 计算输入价格
      } else {
        this.isSlidingScales = false
        this.advertisePrice = this.currentModifyOrder.Price

        this.advertiseAmount = commonFilter.fillDecimal(Decimal.mul(this.advertisePrice, this.advertiseQuantity || 0).toFixed(10), 2) // 计算输入价格
      }
    },
    // 发布买卖广告 输入计算价格
    calculateScalePrice () {
      if (this.isSlidingScales === true) {
        this.currentNumber = this.pairInfo.CurrentPrice || 0

        let slidingScalesValue = Decimal.div(this.slidingScalesValue, 100).toFixed(10)
        slidingScalesValue = commonFilter.fillDecimal(slidingScalesValue, 4)

        this.floatPrice = Decimal.mul(this.pairInfo.CurrentPrice, slidingScalesValue).toFixed(10)
        this.floatPrice = commonFilter.fillDecimal(this.floatPrice, this.pair.cyPrec) // 计算浮动金额

        this.advertiseAmount = commonFilter.fillDecimal(Decimal.mul(this.floatPrice, parseFloat(this.advertiseQuantity) || 0).toFixed(10), 2) // 计算总金额
      } else {
        this.advertiseAmount = commonFilter.fillDecimal(Decimal.mul(parseFloat(this.advertisePrice) || 0, parseFloat(this.advertiseQuantity) || 0).toFixed(10), 2) // 计算输入价格
      }
    },
    // 发布买 广告
    buyAdvertiseBtn () {
      if (!this.inputImport()) {
        return
      }
      if (this.advertiseQuantity < this.currentFeeConfig.BuyMinQuantity) {
        let Warning = this.lang['Buying quantity is less than'] + this.currentFeeConfig.BuyMinQuantity + ' ' + this.pair.coinCode
        ModalApi.message(Warning)
        return
      }

      if (!this.clickIsButton) { return }

      this.clickIsButton = false
      // 提交数据
      let slidingScalesValue = Decimal.div(this.slidingScalesValue, 100).toFixed(10)
      slidingScalesValue = commonFilter.fillDecimal(slidingScalesValue, 4)
      this.$host2.post('Order/ModifyOrder', {
        OrderId: this.currentModifyOrder.ID,
        Quantity: this.advertiseQuantity,
        Price: this.isSlidingScales ? this.floatPrice : this.advertisePrice,
        IsAcceptedWarranty: false, // 是否接受无保证金交易
        FluctuationRate: this.isSlidingScales ? slidingScalesValue : 0 // 使用浮动价格的时候  传浮动价格，否则传0
      })
      .then((res) => {
        if (res.StatusCode === '200') {
          this.isShowModifyAdBox = false
          this.empty()
          ModalApi.message(this.lang['success'])
          setTimeout(() => {
            this.$emit('refreshCurrentAdList')
            EventBus.$emit('refreshMyOrderList')
          }, 1000)
        }
        this.clickIsButton = true
      })
    },

    // 发布卖出广告
    sellAdvertiseBtn () {
      if (!this.inputImport()) { return }

      if (this.advertiseQuantity < this.currentFeeConfig.SellMinQuantity) {
        let Warning = this.lang['Sell quantity is less than'] + this.currentFeeConfig.SellMinQuantity + ' ' + this.pair.coinCode
        ModalApi.message(Warning)
        return
      }

      if (!this.clickIsButton) { return }

      this.clickIsButton = false
      // 提交数据
      let slidingScalesValue = Decimal.div(this.slidingScalesValue, 100).toFixed(10)
      slidingScalesValue = commonFilter.fillDecimal(slidingScalesValue, 4)
      this.$host2.post('Order/ModifyOrder', {
        OrderId: this.currentModifyOrder.ID, // 虚拟币ID
        Quantity: this.advertiseQuantity, // 申报数量
        Price: this.isSlidingScales ? this.floatPrice : this.advertisePrice, // 申报价
        IsAcceptedWarranty: this.isBailn, // 是否接受无保证金交易
        FluctuationRate: this.isSlidingScales ? slidingScalesValue : 0 // 使用浮动价格的时候  传浮动价格，否则传0
      })
      .then((res) => {
        if (res.StatusCode === '200') {
          this.closeModifyAdBox()
          ModalApi.message(this.lang['success'])
          setTimeout(() => {
            this.$emit('refreshCurrentAdList')
            EventBus.$emit('refreshMyOrderList')
          }, 1000)
        }
        this.clickIsButton = true
      })
    },
    // 关闭广告弹窗
    closeModifyAdBox () {
      this.empty()
      this.isShowModifyAdBox = false
    }
  },
  mounted () {
    // CheckCurrencyOnInput函数只需要在mounted设置一次就行，不用在keyup调用
    CheckCurrencyOnInput(this, this.$refs.advertisePrice, 'advertisePrice', () => this.pair.cyPrec || 0)
    CheckCurrencyOnInput(this, this.$refs.slidingScalesValue, 'slidingScalesValue', 2)
    CheckCurrencyOnInput(this, this.$refs.advertiseQuantity, 'advertiseQuantity', () => this.pair.coinPrec || 0)
  }
}
</script>
<style lang="less">
@import './../css/common.less';

/*买卖广告弹出样式*/
  .modifyAdBox {
    position: relative;
    padding: 0 40px;
    width: 400px;
    overflow: hidden;
    border-radius: 8px;

    .close {
      position: absolute;
      right:40px;
      top: 14px;
      img {
        display: block;
        width: 10px;
      }
    }

    .title {
      font-weight: 300;

      dt {
        margin-bottom: 10px;
        width: 100%;
        height:40px;
        line-height: 40px;
        color: #fff;
        border-bottom: solid 1px #444c56;
      }

      dd {
        margin-bottom: 10px;
        width: 100%;
        height: 14px;
        line-height: 14px;
        color: #fff;
        font-size: 12px;

        span{
          float: right;
        }

        a {
          position: relative;
          float: right;
          margin-left: 10px;
          display: inline-block;
          width: 14px;
          height: 14px;
          background:url('./../images/pointPOut.png') no-repeat center;
          background-size: 14px 14px;

          &:hover {
            background:url('./../images/pointPOutHover.png') no-repeat center;
            background-size: 14px 14px;
          }
          em {
            position: absolute;
            right:-30px;
            top: 30px;
            z-index: 10;
            display: none;
            padding: 10px;
            line-height: 24px;
            width:156px;
            background: #2D77BF;
            color: #fff;
            font-size: 12px;
            border-radius: 5px;

            &:after {
              position: absolute;
              right: 30px;
              top: -5px;
              content: "";
              display:block;
              width:0;
              height: 0;
              border-bottom: solid 5px #2D77BF;
              border-left: solid 5px transparent;
              border-right: solid 5px transparent;
            }
          }

          &:hover em {
            display: inline-block;
          }
        }
      }
    }

    .list {
      overflow: hidden;

      li {
        overflow: hidden;

        label {
          display: block;
          padding:15px 0 5px 10px;
          color: #fff;

          span {
            display: inline-block;
            line-height: 18px;
          }
        }

        .form-group {
          position: relative;
          width: 100%;
          color: #fff;

          em{
            display: block;
            width: 100%;
            line-height: 40px;
            text-indent: 10px;
            background: #212A35;
            border-radius: 5px;
          }

          input {
            padding: 0 10px;
            height: 40px;
            line-height: 40px;
            width:100%;
            background: #2A3440;
            border-radius: 5px;
            color: #fff;
            box-sizing: border-box;

            &.inputCurrentIndex {
              width: 122px;
              padding: 0 35px 0 10px;
            }
          }

          .cny {
            position: absolute;
            right: 10px;
            top: 10px;
            display: block;
            width: 60px;
            line-height: 20px;
            border-left: solid 1px rgba(255, 255, 255, 0.2);
            text-align: center;
            color: #fff;

            &.percentage {
              right: auto;
              left: 100px;
              width: auto;
              border:none;
              color: #fff;
            }
          }
        }

        .autoConfiguration {
          margin-left: 10px;
          padding-left: 20px;
          height: 20px;
          line-height: 20px;
          background: url('./../images/checkState1.png') no-repeat left center;
          color: #999;

          &.green{
            background: url('./../images/checkState4.png') no-repeat left center;
          }

          &.red{
            background: url('./../images/checkState4.png') no-repeat left center;
          }
        }

        .currentIndex {
          margin-left: 20px;
        }

        &.noMarginBuyer {
          line-height: 40px;

          a {
            margin-left: 60px;
            display: inline-block;
            padding-left: 30px;
            height: 20px;
            line-height: 20px;
            background: url('./../images/checkState1.png') no-repeat left center;
            float: left;

            &.active{
              background: url('./../images/checkState4.png') no-repeat left center;
            }
          }
        }
      }
    }

    .subtimBox {
      display: block;
      margin: 40px auto;
      width:50%;
      height: 40px;
      line-height: 40px;
      color: #fff;
      text-align: center;
      border-radius: 5px;

      &.blue{
        background: #3782FF;
      }

      &.red {
        background: #B23030;
      }

      &.green {
        background: #509F4C;
      }

      &.active {
        background-color: #2A3441;
        cursor: not-allowed;
      }
    }
  }
</style>
